<template>
  <div class="card">
        
        <div class="card-header">
          <h4 class="title">
            <slot name="title"></slot>
          </h4>
          <span class="more">
            <slot name="more"></slot>
          </span>
        </div>
     <div class="content">
        <slot></slot>
     </div>
    </div>
</template>

<script setup>


</script>

<style lang="scss" scoped>
 // 卡片统一样式
 .card {
    padding: 20px;
    height: 100%;
    border-radius: 4px;
    background-color: #fff;
    .card-header {
      padding-bottom: 14px;
      border-bottom: 1px solid #E6E6E6;
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        color: #333;
        border-left: 4px solid #477EED;
        padding-left: 10px;
      }
      .more {
        color: #666;
      }
    }
  }
</style>